<template>
  <div>
    <el-form label-width="5rem">
      <el-form-item label="表彰类型">
        <span :style="{color:data.color}">{{ data.name }}</span>
      </el-form-item>
      <el-form-item label="表彰单位">
        <CompanySelector :code.sync="filter.company" />
      </el-form-item>
      <el-form-item label="期数">
        <span>第{{ defaultRound }}期</span>
      </el-form-item>
      <el-card>
        <template #header>
          <h2>主要信息</h2>
        </template>
        <el-form-item v-for="item in data.children" :key="item.id" :label="item.name">
          <div style="display:flex">
            <CompanySelector v-if="item.targetType === 1" :code.sync="record[item.id]" />
            <UserSelector v-else :code.sync="record[item.id]" />
            <span class="description" :style="{color:item.color}">{{ item.description }}</span>
          </div>
        </el-form-item>
      </el-card>
    </el-form>
    <el-button v-loading="loading" type="success" class="submit" @click="handleAdd">提交</el-button>
  </div>
</template>

<script>
import { RewardContentInfo } from '@/api/zzxt/reward'
export default {
  name: 'RewardEdit',
  components: {
    CompanySelector: () => import('@/components/Company/CompanySelector'),
    UserSelector: () => import('@/components/User/UserSelector')
  },
  props: {
    data: { type: Object, default: null },
    defaultRound: { type: Number, default: -1 }
  },
  data: () => ({
    loading: false,
    filter: {
      round: 0,
      company: null,
      ratingDesc: null
    },
    record: {},
    recordStructDict: {}
  }),
  computed: {
    globalCompany() {
      return this.$store.state.user.globalCompany
    }
  },
  watch: {
    data: {
      handler(val) {
        if (!val) return
        const data = {}
        const dict = {}
        val.children.map(i => {
          data[i.id] = null
          dict[i.id] = i
        })
        this.$set(this, 'record', data)
        this.$set(this, 'recordStructDict', dict)
      },
      immediate: true
    },
    globalCompany: {
      handler(val) {
        this.filter.company = val
      },
      immediate: true
    },
    defaultRound: {
      handler(val) {
        if (val) {
          console.warn('233', val)
          this.filter.round = val
        }
      },
      immediate: true
    }
  },
  methods: {
    handleAdd() {
      this.handleAddAsync()
    },
    async handleAddAsync() {
      this.loading = true
      const { data, filter } = this
      const item = await RewardContentInfo({
        rewardId: data.id,
        round: filter.round,
        companyCode: filter.company
      }).catch(e => {
        this.loading = false
      })
      const parent = item.model
      const record = this.record
      // const dict = this.recordStructDict
      const tasks = Object.keys(record).map(i => {
        const payload = {
          rewardId: i,
          round: filter.round,
          companyCode: filter.company,
          parent: parent.id
        }
        if (data.targetType === 1) {
          payload.targetCompanyCode = record[i]
        } else {
          payload.targetUserId = record[i]
        }
        return RewardContentInfo(payload)
      })
      await Promise.all(tasks)
        .then(() => {
          this.$message.success('已提交')
          this.$emit('requireUpdate')
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.description {
  margin-left: 1rem;
  color: #ccc;
  overflow: hidden;
}
.submit {
  width: 100%;
  margin-top: 1rem;
}
</style>
